<template>
  <div class="base-content">
    <div class="basic-info">
       <el-form :inline="true">
          <el-form-item label="服务名称">
            <el-input
              placeholder="服务名称"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="onQuery"
              >查询</el-button>
            <el-button @click="cancelForm">清空</el-button>
          </el-form-item>
        </el-form>
        <!--操作栏-->
        <div class="base-content-operate">
          <el-button
            icon="el-icon-plus"
            type="primary"
            @click="onNew"
            >新增</el-button>
          <el-button
          icon="el-icon-document-copy"
          type="primary"
          @click="importData"
          >导出</el-button>
          <el-button
          icon="el-icon-document-copy"
          type="primary"
          @click="importData"
          >导入</el-button>
        </div>
      <div class="main-layout">
        <!--台账-->
        <div class="sideBar-left">
          <p class="sideBar-title">服务列表</p>
          <el-input
            v-model="filterText"
            placeholder="输入关键字进行过滤"
            style="width: 230px"
          ></el-input>
          <el-tree
            ref="tree"
            :filter-node-method="filterNode"
            class="customer-tree"
            :data="treeData"
            :props="defaultProps"
            @node-click="handleNodeClick"
          >
            <span slot-scope="{ node, data }" class="custom-tree-node">
              <span>
                <i v-show="data.isSampLing" class="el-icon-document"></i>
                <i v-show="!data.isSampLing" class="el-icon-folder-opened"></i>
                {{ node.label }}
              </span>
            </span>
          </el-tree>
        </div>

        <div class="sideBar-right">
          <div class="child-table">
            <!--列表-->
            <el-table
              ref="table"
              :data="list"
              tooltip-effect="dark"
              height="calc(100% - 150px)"
            >
              <el-table-column align="center" label="序号" width="50">
                <template slot-scope="scope">
                  {{ scope.$index + 1 }}
                </template>
              </el-table-column>
              <el-table-column label="编号">
                <template slot-scope="scope">
                  {{ scope.row.num }}
                </template>
              </el-table-column>
              <el-table-column label="名称">
                <template slot-scope="scope">
                  {{ scope.row.detectionItemName }}
                </template>
              </el-table-column>
              <el-table-column label="别名">
                <template slot-scope="scope">
                  {{ scope.row.anotherName }}
                </template>
              </el-table-column>
              <el-table-column label="检测对象">
                <template slot-scope="scope">
                  {{ scope.row.detectionObject }}
                </template>
              </el-table-column>
              <el-table-column label="参数名称">
                <template slot-scope="scope">
                  {{ scope.row.parameterName }}
                </template>
              </el-table-column>
              <el-table-column label="标准方法">
                <template slot-scope="scope">
                  {{ scope.row.standardMethod }}
                </template>
              </el-table-column>
              <el-table-column label="检测方法">
                <template slot-scope="scope">
                  {{ scope.row.detectionMethod }}
                </template>
              </el-table-column>
              <el-table-column label="限制范围">
                <template slot-scope="scope">
                  {{ scope.row.restrictRange }}
                </template>
              </el-table-column>
              <el-table-column label="限制">
                <template slot-scope="scope">
                  {{ scope.row.restrict }}
                </template>
              </el-table-column>
              <el-table-column label="质量指标">
                <template slot-scope="scope">
                  {{ scope.row.qualityIndex }}
                </template>
              </el-table-column>
              <el-table-column label="方法标准">
                <template slot-scope="scope">
                  {{ scope.row.methodStandard }}
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <div class="base-table-operation">
                    <el-link
                      v-rights="'Edit'"
                      size="mini"
                      type="primary"
                      @click="handleEdit(scope.row)"
                      >编辑</el-link
                    >
                    <el-link
                      v-rights="'Delete'"
                      size="mini"
                      type="danger"
                      @click="handleDelete(scope.row)"
                      >删除</el-link
                    >
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <BasePagination
            :total="pagination.total"
            :page-index="pagination.pageIndex"
            :page-size="pagination.pageSize"
            @sizeChange="sizeChange"
            @currentChange="currentChange"
          />
          <SysBusinessDetectionItemEdit
            ref="SysBusinessDetectionItemEdit"
            :dialog-form-visible.sync="dialogFormVisible"
            :edit-id.sync="editId"
          />
        </div>
      </div>
      <!--筛选条件-->
      <report v-model="isShowReportDialog" :edit-item="editItem" />
    </div>
  </div>
</template>

<script>
import {
  getList,
  UpdatePrice,
  UpdatePriceStatus,
  GetSampleTree,
} from "../../../api/ThirdParty/EntrustService/EntrustService.js";

export default {
  name: "EntrustServicePriceList",
  data() {
    return {
      loading: true,
      list: [],
      treeData: [],
      defaultProps: {
        children: "children",
        label: "content",
      },
      queryForm: {
        id: "",
      },
      sampleFilterForm: {},
      dialogFormVisible: false,
      formData: {
        id: 0,
        parentId: 0,
        serviceName: "",
        content: "",
        price: 0,
        priceStatus: 0,
        remark: "",
      },
      pagination: {
        pageIndex: 1,
        pageSize: 10,
        total: 0,
      },
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  created() {
    GetSampleTree(this.sampleFilterForm).then((res) => {
      this.treeData = res.data;
    });
    this.getList();
  },
  methods: {
    handleNodeClick(data) {
      this.queryForm.id = data.id;
      this.getList();
    },
    currentChange(val) {
      this.pagination.pageIndex = val;
      this.getList();
    },
    // 操作成功回调用
    SuccessfulOperation() {
      this.$message({
        type: "success",
        message: "设置成功!",
      });
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 操作失败回调用
    faildfulOperation() {
      this.$message({
        type: "info",
        message: "已取消",
      });
    },
    // 清空筛选条件
    cancelForm() {
      this.$refs.queryForm.resetFields();
      this.getList("filter");
    },

    sizeChange(val) {
      this.pagination.pageIndex = 1;
      this.pagination.pageSize = val;
      this.getList();
    },
    getList() {
      getList(this.queryForm, this.pagination)
        .then((res) => {
          this.list = res.data.dataList ? res.data.dataList : [];
          this.list.forEach((item) => {
            item.price = item.price / 100;
          });
          this.pagination.total = res.data.total;
        })
        .catch(() => {});
      this.init();
    },
    // 通过switch控件改变状态
    changeSwitch(row) {
      const str =
        row.priceStatus === 1
          ? "启用实时计价，开启实时计价后，本行单价将不再使用"
          : "禁用实时计价";
      this.$confirm(str, "提示", {
        confirmButtonText: "我知道了",
        type: "warning",
      }).then((res) => {
        var _formData = this.formData;
        _formData.id = row.id;
        _formData.priceStatus = row.priceStatus === true ? "1" : "0";
        UpdatePriceStatus(_formData)
          .then((res) => {
            this.SuccessfulOperation();
            getList();
          })
          .catch((res) => {
            this.faildfulOperation();
          });
      });
    },
    updatePriceFunction(data) {
      var _formData = this.formData;
      _formData.id = data.id;
      _formData.price = data.price;
      if (_formData.price === "") {
        this.$message.warning("价格不能为空");
        return;
      }
      this.$confirm("此操作将设置服务金额, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        callback: (action) => {
          if (action === "confirm") {
            UpdatePrice(_formData)
              .then((res) => {
                getList();
              })
              .catch((res) => {
                this.faildfulOperation();
              });
          }
        },
      });
    },
  },
};
</script>
<style lang="scss" >
.DetectionItem-menu-content {
  padding: 0;
  background: #f8fbff;
  display: flex;
  align-items: flex-start;

  .menu-detail {
    width: calc(100% - 260px);
    height: 100%;
    background: #fff;
    padding: 20px 0 20px 20px;
    overflow-y: auto;
    box-sizing: border-box;
    position: relative;
    display: block;
    align-items: flex-start;
    .menu-content {
      width: 50%;
      border-right: 1px #dedede solid;
    }
    .empty {
      height: calc(100% - 40px);
    }
    .menu-operation {
      width: 50%;
      padding: 0 24px;
      box-sizing: border-box;
    }
  }

  .menu-form {
    margin-top: 32px;
    .el-form-item--small {
      margin-right: 24px;
    }
    .el-select {
      width: 100%;
    }
  }
}
</style>
